<template>
  <ta-drawer
    @close="close"
    :visible="visible"
    destroyOnClose
    width="300px"
    wrapClassName="msg-list"
  >
    <h4 class="msg-head">通知（4条未读）</h4>
    <div class="msg-item new" v-for="item in 3" :key="item" @click="clickDetail(item)" :class="{'active': item == clickIndex}" :style="{'border-color': item == clickIndex ? mainColor: '#fff'}">
      <div class="msg-title">{{item}}.新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</div>
      <div class="msg-time">2019年7月24日14:02:15</div>
    </div>
    <div class="msg-detail" v-if="showDetail">
      <h4 class="detail-title">新闻标题</h4>
      <p>部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字</p>
    </div>
    <div slot="footer" style="text-align: center">
      <ta-button block>清除通知</ta-button>
    </div>
  </ta-drawer>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  props: ['visible'],
  name: 'msg-list',
  data () {
    return {
      clickIndex: '',
      showDetail: false
    }
  },
  computed: {
    ...mapGetters({
      state: 'getStateValue',
      mainColor: 'getThemeColor'
    })
  },
  methods: {
    clickDetail (item) {
      this.clickIndex = item
      this.showDetail = true
    },
    close () {
      this.showDetail = false
      this.clickIndex = ''
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" type="text/scss">
  .msg-list {
    .ant-drawer-body { padding: 24px 0; }
    .msg-head { padding: 0 24px 16px; margin: 0; }
    .msg-item { padding: 10px 24px 0 21px; cursor: pointer; position: relative; border-left: #fff solid 3px;
      &:hover { border-left: #fafafa solid 3px; background: #fafafa }
      &.active { border-left: $main-color solid 3px; background: #fafafa }
      &.new:before { content: ""; display: block; width: 6px; height: 6px; background: $color-error; border-radius: 100%; position: absolute; left: 24px; top: 18px }
      .msg-title { overflow: hidden; padding: 0 16px; white-space: nowrap; text-overflow: ellipsis; }
      .msg-time { color: #999999; padding: 5px 16px 10px; border-bottom: 1px solid #eee; }
    }
    .msg-detail {
      position: absolute;
      width: 300px;
      height: 100%;
      right: 300px;
      top: 0px;
      padding: 24px;
      overflow: auto;
      z-index: 9999;
      background: #fff;
      @include box-shadow();
      @include beautifyScrollbar();
    }
    .detail-title { border-bottom: 1px solid #eee; padding-bottom: 16px; margin-bottom: 10px; }
  }
</style>
